<!--
 * @Author: Evan Liu
 * @Date: 2022-03-03 10:36:38
 * @LastEditTime: 2022-03-03 13:43:39
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lpc\ias_ui\src\views\coi\components\operationLog.vue
-->
<template>
  <el-dialog
    title="操作日志"
    top="15vh"
    :visible="dialogVisible"
    width="1200px"
    :before-close="handleClose"
  >
    <el-table :data="tableData" class="table" stripe style="width: 100%;" border>
      <!-- <el-table-column :show-overflow-tooltip="true" label="操作时间" width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateTime | transDate }}
        </template>
      </el-table-column> -->
      <el-table-column
        v-for="(val, i) in logList"
        :key="i"
        show-overflow-tooltip
        :label="val.title"
        :min-width="80"
        :align="'center'"
        :prop="val.column"
      >
        <template v-if="val.slot || val.btnList" v-slot="scope">
          <slot v-if="val.slot" :name="val.slot" :scope="scope" :parameter="val" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import moment from 'moment'

export default {
  name: 'OperationLog',
  filters: {
    transDate(v) {
      return moment(v).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    logList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    // 弹窗关闭事件
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ p{
  margin: 0;
  padding: 0;
}
.remark{
  margin: 8px 0;
  text-align: left;
  .remarkTitle{
    width: 70px;
    line-height: 20px
  };
  .remarkList{
    flex: 1;
    line-height: 20px;
    white-space: pre-wrap;
  }
}
</style>
